<template>
        <div class="page-content" @scroll="scrollHeight">
            <div class="home-home">
            <header class="home-header">
                <div @click="tosearch"><i class="icon1 ion-ios-search"></i></div>
                <div>首页</div>
                <div><i class="icon2 ion-android-call" @click="showActionSheet()"></i></div>
                <div class="clear"></div>
            </header>
            <slider :list0="list0" :list="list"></slider>
            <div class="home-all">
                <div class="home-nav-box">
                    <div class="home-nav-search">
                        <i class="ion-ios-search"></i>
                        <input type="text" value="搜索关键词、产品ID" @focus="inputFocus()">
                        <span class="home-nav-split"></span>
                        <i class="ion-android-call" @click="showActionSheet()"></i>
                    </div>
                    <div class="clear"></div>
                    <div class="home-row-all">
                        <div class="home-row row1">
                            <ul>
                                <li><router-link to="/sixlist/多日游"><div></div><h4>多日游</h4></router-link></li>
                                <li><router-link to="/sixlist/一日游"><div></div><h4>一日游</h4></router-link></li>
                                <li><router-link to="/sixlist/票务"><div></div><h4>票务</h4></router-link></li>
                                <li><router-link to="/custompackage"><div></div><h4>包制定团</h4></router-link></li>
                            </ul>
                        </div>
                        <div class="home-row row2">
                            <ul>
                                <li><router-link to="/sixlist/游轮游"><div></div><h4>游轮游</h4></router-link></li>
                                <li><router-link to="/sixlist/通讯"><div></div><h4>通讯</h4></router-link></li>
                                <li><router-link to="/visa"><div></div><h4>签证</h4></router-link></li>
                                <li><router-link to="/sixlist/接送"><div></div><h4>接送</h4></router-link></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="home-image">
                    <router-link to="/sixlist/途风精品"><img src="../../assets/image/tff-boutique.png"></router-link>
                </div>
                <tab-change class="tabchange" :tablist_3="tablist"></tab-change>
            </div>
            </div>
            <!--新页面-->
            <popular-search :listsearch="listsearch"></popular-search>
        </div>

</template>

<script>
    import Slider from '../../components/slider.vue'
    import TabChange from '../tabchange.vue'
    import PopularSearch from '../../components/popularsearch.vue'
    export  default{
        data(){
            return{
                list0:{},
                list:[{},{},{},{},{},{},{}],
                tablist:[{},{},{}],
                listsearch:[]
            }
        },
        components:{
            Slider,TabChange,PopularSearch
        },
        methods:{
            tosearch(){
                $('.home-add').css('display','block')
                $('.home-add').stop().animate({'margin-top':'0','position':'fixed'},250)
                $('.home-home').css('display','none')
                $('.tabbar.visible').css('opacity','0')
            },
            inputFocus(){
                $('.home-add').css('display','block')
                $('.home-add').stop().animate({'margin-top':'0','position':'fixed'},250)
                setTimeout(function(){
                    $('.home-home').css('display','none')
                },250)
                $('.tabbar.visible').css('opacity','0')
            },
            scrollHeight(){
                var scrollHeight=this.$el.scrollTop
                if(scrollHeight>=200){
                    $('.home-header').css('display','block')
                }else{
                    $('.home-header').css('display','none')
                }
            },
            showActionSheet(theme) {
                $actionSheet.show({
                    theme: theme || '',
                    title: '7x24服务热线',
                    buttons: {
                        '(中国)400-635-6555': () => {
                            console.log('action 1 called.')
                        },
                        '(美国)866-638-6888': () => {
                            console.log('action 2 called.')
                        }
                    }
                })
            }
        },
        created(){
            this.axios.get('https://app.toursforfun.com/config/index/v1')
                .then(data=>{
                    //slider
                    //获取第一张图
                    this.list0=data.data.data.link[0]
                    //剩余六张图
                    this.list=data.data.data.banner
                    //tabbar三组图文切换
                    this.tablist=data.data.data.recommend_products
                })
                .catch(err=>{
                    console.log(err)
                })
            // popularsearch
            this.axios.get('https://app.toursforfun.com/resource/popularSearch')
                .then(data=>{
                    this.listsearch=data.data.data
                })
                .catch(err=>{
                    console.log(err)
                })
        }
    }
</script>

<style>
    header.home-header{
        position: fixed;
        width:100%;
        height:44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        z-index:2;
        background: #fff;
        display: none;
    }
    header.home-header div:nth-of-type(1),header div:nth-of-type(3){
        width:20%;
        height:44px;
        float: left;
        text-align: center;
    }
    header.home-header .icon1,header .icon2{
        font-size:28px;
        color: #363636;
    }
    header.home-header div:nth-of-type(2){
        width:60%;
        text-align: center;
        font-size: 20px;
        color: #363636;
        float: left;
    }
    .page .page-content{
        background-color: #fff;
    }
    .home-all{
        width:100%;
    }
    .home-nav-box{
        margin-top:54px;
        margin:0 24px;
        position: relative;
    }
    .home-nav-search{
        position: absolute;
        top:-65px;
        width:100%;
        height:44px;
        padding:0 15px;
        line-height: 44px;
        border-radius: 20px;
        border-top-left-radius: 20px;
        background-color: #FFF;
        box-shadow: 0 5px 6px 0 #dedede;
        z-index: 1;
        overflow: hidden;
    }
    .home-all .ion-ios-search{
        display: inline-block;
        font-size: 30px;
        color: #0090f2;
        margin-right:15px;
        float: left;
    }
    .home-nav-search input{
        border:none;
        outline: none;
        width:76%;
        margin-top:5px;
        font-size:16px;
        color: #0090f2;
        float: left;
    }
    .home-nav-split{
        display: inline-block;
        height:24px;
        width:1px;
        margin:10px 0;
        background: #ccc;
    }
    .home-all .ion-android-call{
        font-size:28px;
        color: #ccc;
        position: absolute;
        right:15px;
    }
    .home-row-all{
        margin-top:40px;
    }
    .home-row{
        width:100%;
        margin:20px 0;
    }
    .home-row ul{
        width:100%;
         display: flex;
     }
    .home-row ul li{
        flex-basis: 25%;
    }
    .home-row h4{
        font-size:14px;
        text-align: center;
        margin:0;
    }
    .home-row div{
        width:40px;
        height:40px;
        margin:0 auto;
        background-image: url("../../assets/image/home2017.png");
        background-size: 160px 160px;
    }
    .row1 li:nth-of-type(1) div{
        background-position: 0 0;
    }
    .row1 li:nth-of-type(2) div{
        background-position: -40px 0;
    }
    .row1 li:nth-of-type(3) div{
        background-position: -80px 0;
    }
    .row1 li:nth-of-type(4) div{
        background-position: -120px 0;
    }
    .row2 li:nth-of-type(1) div{
        background-position: 0 -40px;
    }
    .row2 li:nth-of-type(2) div{
        background-position: -40px -40px;
    }
    .row2 li:nth-of-type(3) div{
        background-position: -80px -40px;
    }
    .row2 li:nth-of-type(4) div{
        background-position: -120px -40px;
    }
    .home-image{
        margin:0 auto;
    }
    .home-image img{
        width:100%;
    }
    .tabchange{
        width:88%;
        margin:0 auto;
        margin-bottom: 49px;
    }
</style>